html, body{ height:100%; }
.wrapper{ width:100%; }
.img img{ width:100%; }
.icon-font-checked:before{ content:"\e909"; }
.icon-font-pencil:before{ content:"\e90c"; }
.icon-font-aircraft:before{ content:"\e90b"; }
.icon-font-star:before{ content:"\e90a"; }

header{background-color:#F74B4B; height:50px; line-height:50px;color:#FFF;font-size:20px;text-align:center;}
.step{ width:90%; margin:0 auto; position:absolute; top:50%; left:50%; -ms-transform:translate(-50%, -50%); /* IE 9 */ -webkit-transform:translate(-50%, -50%); /* Safari and Chrome */ -o-transform:translate(-50%, -50%); /* Opera */ -moz-transform:translate(-50%, -50%); /* Firefox */ transform:translate(-50%, -50%); }
    .step .title, .result .title{ color:#F74B4B; font-size:18px; text-align:center; }
    .step .content, .result .content{ margin-top:15px; }
.step-2, .step-3{ display:none; }

.step-1{ }
    .step-1 ul li:first-child{ float:left; width:40%; }
    .step-1 ul li:last-child{ float:right; width:40%; }
        .step-1 ul li a{ display:block; width:100% }
        .step-1 ul li .desc{ text-align:center; margin-top:10px; background-color:#BABABA; color:#FFF; font-size:18px; height:34px; line-height:34px; width:100%; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; }
        .step-1 ul li.cur .desc{background-color:#F74B4B;}

.step-2{ top:54%; }
    .step-2 .title{ }
    .step-2 ul li{ width:100%; margin-top:15px; position:relative; }
    .step-2 ul li .img{ float:left; display:block; width:45% }
    @media (min-width:320px){
        .step-2 ul li .img{ width:35% }
        .step-2 ul li .desc{ width:35% }
    }
    .step-2 ul li .desc{position:absolute; top:50%; right:0; -ms-transform:translate(0, -50%); /* IE 9 */ -webkit-transform:translate(0, -50%); /* Safari and Chrome */ -o-transform:translate(0, -50%); /* Opera */ -moz-transform:translate(0, -50%); /* Firefox */ transform:translate(0, -50%); text-align:center; background-color:#BABABA; color:#FFF; font-size:18px; height:34px; line-height:34px; width:45%; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px;}
    .step-2 ul li.cur .desc{background-color:#F74B4B;}

.step-3 .content ul{ position:relative; }
    .step-3 .content ul li{ position:absolute; height:60px; /*border:1px solid black;*/ text-align:center; vertical-align:middle;}
        .step-3 .content ul li i.icon-font-checked:before{ position:absolute; right:13px; top:-5px; color:#FFF; font-size:14px; z-index:99; background-color:#8ACA6C; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; width:16px; height:16px; line-height:16px; }
        .step-3 .content ul li span{ color:#FFF; position:relative; font-size:14px; height:30px; line-height:30px; margin-top:15px; border-radius:20px; padding:0 30px; display:inline-block; }
.step-3 .checked-ok{ color:#F74B4B; background-color:transparent; border:none; text-align:center; height:30px; line-height:30px; font-size:18px; width:100px; margin:10px auto 0 auto; display:block; }

.result {width:90%;margin:10px auto 10px auto;}
    .result .title{ }
    .result .img{ width:40%; margin:0 auto; }
    .result .name{ color:#F74B4B; font-size:18px; text-align:center; margin:5px 0; }
    .result .desc{ font-size:16px; color:#878787; line-height:2; }
    .result .btn-share{ display:block; width:70%; height:40px; margin:30px auto 0 auto; -webkit-border-radius:20px; -moz-border-radius:20px; border-radius:20px; line-height:40px; background-color:#F74B4B; color:#FFF; font-size:18px; text-align:center; }
    @media (min-width:320px){
        .result .img{ width:35% }
        .result .desc{ font-size:14px !important; }
    }

.shadow{ background-color:#000; opacity:0.8; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999; display:none; }
    .shadow .arrow{ background:url("../images/share-arrow.png") no-repeat; width:300px; height:200px; position:absolute; top:0; right:0; }
.footer{ height:110px;}
    .footer .inner{ height:110px; background-color:rgba(255, 255, 255, 0.8); z-index:99; width:90%; bottom:0; position:fixed; left:5%; }
    .footer .seperate{ width:100%; background-color:#545454; height:1px; margin:10px 0;}
    .footer .action{}
        .footer .action ul li{ float:left; width:33%; }
            .footer .action ul li a{ display:block; width:60px; height:60px; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; border:1px solid #828282; margin:0 auto; text-align:center;}
            .footer .action ul li a i{display:block;font-size: 30px; display: block; line-height: 40px; color: #828282; margin-top: 10px;}
            .footer .action ul li p{ text-align:center; color:#828282; }